梦入琼楼寒有月，行过石树冻无烟

vue and axios

2022-04-21

Get or Post

在上一个章节中我们了解到 Axios 是一个基于 Promise 的网络请求库，通常运用在 node.js 中，使得可以完成在原来之前传统开发环境下的 ajax，在此之前，我们还需要通过下述命令完成安装和添加的操作：

1
npm install axios

在安装完成后，我们需要在自己的 Vue 项目中添加 axios 来作为库并进行使用，可以通过 vue add axiso 在 export default 中定义如下方法：

1
vue add axios

然后在 .vue 文件下 script 元素中的 export default 方法中增加 created() 方法中，以此来调入接口，之后通过：

1
2
3
4
5
created() {
	axios.get('').then(function (res) {
		console.log(resp)
	})
}

通过上述的 code 来请求 api，并输出全部响应到的数据后，我们就可以通过在之前请求相应的数据中进行单个解析:

1
2
3
4
5
6
created() {
	const _this = this
	axios.get('').then(function (res) {
		_this.tableData = res.data.content
	})
}

除了上述方法外，我们还可以使用下述方法来进行实现其同样的效果，但主要的区别就是在于代码的可视性。

1
2
3
4
5
6
axios({
	method: 'get',
	uri: 'API'
}).then(function(res) {
	console.log(res)
})

假设你如果要发送 POST 请求，那么我们可以将上述的 Code 改为下述示例：

1
2
3
4
5
6
7
8
axios({
	method: 'post',
	uri: 'uri',
	name: 'administrator',
	pass: '123456789'
}).them(res => {
	console.log(res)
})

需要注意的是，在上述 POST 请求中，user 和 pass 是 API 中需要我们所传入的信息，当然，这些可以根据实际情况自行进行调整。

1
在 ```created``` 方法中写入 Axios 是为了在加载时第一时间获取到数据，如果是需要触发才会发生的事件，那么建议你在 ```methods``` 方法中定义一个方法事件。

在上述的 code 中，我们首先通过 _this 来解决作用域的问题，并通过 axios 的解析目标 API 所相应的数据(data) 下的 content Key，然之后就需要在数据表格中写入：

1
2
3
4
5
data() {
	return {
		tableData: null
	}
}

由于我们拿到的是数组数据，我们可以通过在其组件外在套一件 template 并通过 v-for 指令来进行循环输出，在此之后，我们就可以通过翻阅 Axios 的官方文档，来满足我们大部分的需求。

Backage

在正常的开发环境中，一般情况下我们很少会直接去使用 Axios 来直接去写入到方法中，更多的情况是定义一个实例 来满足请求(request)\响应(response)拦截器(interceptors) ，这通常被称之为《封装》

在此之前，我们需要在当前的 Vue 项目中率先构建出一个封装目录，可以在 src/request 目录也可以直接在根目录中新建一个 utils 目录进行封装。

实例 (Create)

之后还需要在此目录中创建两个 .js 文件，分别为 request.js 和 api.js 两个，并在 request.js 中定义一个实列：

1
2
3
4
5
6
7
import axios from 'axios'

const instance = axios.create({
	baseURL: "",
	timeout: 10000
	headers: {'X-Custom-Header': 'foobar'}
})

在上一段 Code 中， baseURL 是我们 API 的基础 URI，举个例子，假设我的 API 是 https://axios-http.com/zh/docs/instance ，那么 baseURL 就是 https://axios-http.com。

而之后的两个参数就是 timeout 超时时间的设置以及 headers 请求头的加入。

拦截器 (Interceptors)

拦截器的定义主要分为 request & response 即请求和相应的拦截，因为 Axios 是基于 promise 上构建的，Code 如下：

1
2
instance.interceptors.request.use(callback, callback)
instance.interceptors.response.use(callback, callback)

在上述的拦截器中，所返回的 callback 中，第一个代表成功，而第二个表示错误的拦截，是不是很像 Promise，现在，我们在此基础上再次进行编写：

1
2
3
4
5
6
7
8
9
10
11
instance.interceptors.request.use(config => {
	//
}, er r=> {
	return Promise.reject(err)
})

instance.interceptors.response.use(res = > {
	return res;
}, err => {
	return Promise.reject(err)
})

在上述 Code 中，在请求中，如果有特定需要你可以在 config 中来进行添加你的 Code，这会在请求的同时发送出去，而之后的响应在没有特定需要的情况下，可以直接返回响应即可。

同样的你也可以在这里编写一个处理响应的 Code 在返回，这都根据你的项目需要来进行编写。

1
export default instance;

最后，我们需要通过 Node 所提供的 Model 概念来将我们的实例导出，然后在 api.js 中进行使用

封装

之后在 api.js 文件中，需要引入我们刚刚全部导出的封装，来将他整体引入：

1
import request from '@/request/request.js'

由于我们已经引入了之前的 request.js 实例，之后我们需要在当前文件中写入需要的 API 进行请求：

1
export const GetUser = () => request.get('uri');

而之后的使用我们可以在之前的 .vue 文件中，在 created 或 methods 方法，定义一个参数，但在此之前我们还需要引入之前封装的 api.js 文件：

1
2
3
4
5
6
7
8
9
import { GetUser } from '@/request/api.js';

methods: {
	UserLogin() {
		GetUser().then(function(res) {
			console.log(res)
		})
	}
}

通常 ，在少部分的情况下的功能需求会让我们在请求时加入一些参数，而封装之后的参数部分定义主要可以体现在 Post 请求的发送过程上：

1
export const PostUser = (params) => request.post('uri', params);

假设如果是 POST 方法的请求，那么我们可以在 .Vue 文件的 created 或 methods 方法下同样和 Get 一样定义个参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { GetUser, PostUser } from '@/request/api.js';

methods: {
	UserLogin() {
		GetUser().then(function(res) {
			console.log(res)
		})
	},
	PostRegister() {
		PostUser({
			user: 'administrator',
			pass: '123456789'
		}).then(res => {
			console.log(res)
		})
	}
}

通过对 axios 的实例封装使得我们可以通过上述 Code 非常简单的来实现对 API 的操作，通过 params 增加了 Code 的可读性和后期维护的成本。

⬅️ Go back